<template>
  <div>
    <el-upload
      class="upload-demo"
      action="upload-url-demo"
      :on-preview="handlePreview"
      :http-request="myFuncUpload"
      :file-list="fileList"
      list-type="picture-card"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file">
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePreview(file)">
            <i class="el-icon-zoom-in"></i>
          </span>
        </span>
      </div>
      <!-- <el-button size="small" type="primary">点击上传</el-button> -->
      <div slot="tip" class="el-upload__tip">文件名称：{{ data.tip }}</div>
    </el-upload>
    <!-- 预览 -->
    <el-dialog :visible.sync="dialogVisible" width="80vw" :modal-append-to-body="true" append-to-body @close="closeFnc">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [],
      dialogVisible: false,
      dialogImageUrl: '',
    };
  },
  props: ['data'],
  mounted() {
    console.log('this.data', this.data);
    this.getImgUrl();
  },
  methods: {
    getImgUrl() {
      // this.fileList.push({ name: 'flies', url: this.data.url });
      console.log('this.data.url', this.data.url);
    },
    myFuncUpload(response) {
      let formFile = new FormData();
      let imgName = 'files';
      formFile.append(imgName, response.file);
      this.fileList.pop();
      this.$api
        .fyUpload(this.data.game_id, this.data.name, formFile)
        .then(res => {
          if (res.code == 101) {
            this.$emit('reUrlData', this.data.url);
            this.fileList.push({ name: this.data.tip, url: `${data[0]}?time=${new Date()}` });
          }
        })
        .catch(err => {
          console.log('123', 123);
        });
    },
    // 上传超出提示
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    // 移除
    beforeRemove(file, fileList) {
      this.$confirm(`确定移除该图片吗？`).then(() => {
        this.fileList.pop();
        this.$emit('reUrlData', '');
        return true;
      });
      return false;
    },
    // 预览
    handlePreview(file) {
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
    },
    // 关闭预览
    closeFnc() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang='stylus' scoped>
body {
}
</style>
